<template>
  <div>
    姓：<input v-model="firstName" type="text" /> <br />
    名：<input v-model="lastName" type="text" /> <br />
    <div> 合并姓名为: {{ firstName }} -- {{ lastName }}</div>
    <div> 计算属性，合并姓名为: {{ fullName }}</div>
    <div> 计算属性，合并姓名为: {{ fullName2 }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, defineExpose } from 'vue';

let firstName = ref("")
let lastName = ref("")
//写法1
const fullName = computed(() => (firstName.value + lastName.value))
const fullName2 = computed({
  get(){
    return firstName.value + lastName.value
  },
  set(val) {
    console.log(val);
  }
})

defineExpose({
  firstName,
  lastName,
  fullName,
  fullName2
})

</script>

<style scoped lang='scss'></style>
